<template>
    <div>
        <mian-layout @refresh="resetForm('search_data')">
            <template v-slot:conTop>
                <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                    <el-form-item label="卡片名称" prop="cardName">
                        <el-input v-model="search.cardName" placeholder="请输入卡片名称"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="">
                        <el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
                    </el-form-item>
                </el-form>   
            </template>
            <div class="myanfbtntabbox">
                <el-tabs v-if="countData.pending || countData.pending==0" v-model="search.cardStatus" @tab-click="doSearch">
                    <el-tab-pane :label="`待引用(${countData.pending})`" name="1"></el-tab-pane>
                    <el-tab-pane :label="`待领取(${countData.unclaimed})`" name="2"></el-tab-pane>
                    <el-tab-pane :label="`已领取(${countData.received})`" name="3"></el-tab-pane>
                </el-tabs>
                <div class="mybtn">
                    <el-button type="success" size="small" icon="el-icon-plus" @click="goAdd">创建卡片</el-button>
                </div>
            </div>
            <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page'>
                
                <el-table-column property="cardName" label="卡片名称" align='left'></el-table-column>
                <el-table-column :show-overflow-tooltip="true" property="cardDesc" label="卡片描述" align='left'></el-table-column>
                <el-table-column property="authorName" label="创作者" align='left' width="90px"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" property="valueAnalysis" label="作品价值描述" align='center' width="100px"></el-table-column>
                <el-table-column property="timestamp" label="创建时间" align='center' width="180px">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column prop="operation" align='center' label="操作" width="280">
                    <template slot-scope='scope'>
                        <el-button size="mini" icon="el-icon-search" @click="goLook(scope.row)">查看</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                        <el-button size="mini" type="success" plain icon="el-icon-edit" @click="goEdit(scope.row,2)">修改</el-button>
                    </template>
                </el-table-column>

            </my-table>
        </mian-layout>

    </div>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import u3dSceneSelect from "@/components/public/u3dSceneSelect.vue";
import {
  get_card_list,
  get_card_status_number,
  del_card
} from '@/api/collext'
export default {
    components:{
      myTable,
      u3dSceneSelect
    },
    data(){
        return{
            search:{
                cardStatus:'1',
                cardName:'',
                createTimeEnd:'',
                createTimeStart:''
            },
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            countData:{},
            dataTime:'',
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.getList()
        this.getStatusNumber()
    },
    methods:{
        doSearch(){
            this.pageIndex = 1
            this.getList()
        },
        getList(callback){ 
            this.loading = true
            if(this.dataTime){
                this.search.createTimeStart = this.dataTime[0]
                this.search.createTimeEnd = this.dataTime[1]
            }
            get_card_list({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
                callback && callback()
            })
        },
        getStatusNumber(){
            get_card_status_number().then(res =>{
                this.countData = res.data
            })
        },
        del(item) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await del_card(item.cardId)
                if(res.success){
                    this.$message.success('删除成功')
                    this.page.pageIndex = 1
                    this.getList()
                }else{
                   // this.$message.error('删除失败');
                }
            }).catch(() => {});
        },
        tableSelect(item){
            this.multipleSelectionIds = []
            for(let i=0;i<item.length;i++){
                this.multipleSelectionIds.push(item[i]._id)
            }
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dataTime = []
            for (const key in this.search) {
               (key!='cardStatus') && (this.search[key] = '')
            }
            this.page.pageIndex = 1
            this.getList()
        },
        goEdit(item,onlyLook){
            sessionStorage.setItem('details',JSON.stringify(item))
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push(`/card/add?id=${item.cardId}`)
        },
        goAdd(){
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push('/card/add')
        },
        goLook(item){
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push(`/card/look/${item.cardId}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .myanfbtntabbox{
        position: relative;
        z-index: 10;
        .mybtn{
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
        }
    }
</style>